<template>
  <div class="uploadServer">
    <div class="addIcon" ref="addIcon">
      <ul>
        <li v-for="(item, key) in imagesTarget" :key="key">
          <div class="imgDiv" v-html="item.outerHTML"></div>
          <div class="imgCover">
            <i class="fa fa-times-circle-o" @click="deleteURL(key)"></i>
          </div>
        </li>
      </ul>
      <label
        for="localSource"
        class="localSourceLabel"
        ref="localLabel"
        v-show="!files.length"
        @click.stop
      >
        <i class="fa fa-cloud-upload" aria-hidden="true"></i>
      </label>
      <input
        type="file"
        id="localSource"
        multiple="multiple"
        @change="selectFile"
        @click.stop
      />
    </div>
    <div class="uploadFooter">
      <button @click.prevent.stop="startUpload" class="btn danger">开始上传</button>
    </div>
  </div>
</template>
<script>
import mixin from '../../mixins/index'
export default {
  props: {
    uploadMethod: {
      type: Function,
      default: () => { return () => { } }
    },
    uploadFormDataName: {
      type: String,
      default: ''
    },
    uploadResponse: {
      type: Array
    },
    formDataTitle: {
      type: String,
      default: 'file'
    },
    headerConfig: {
      type: Object,
      default: () => { return {} }
    },
    currentSelection: {
      type: Object,
      default: () => { return {} }
    }
  },
  mixins: [mixin],
  data () {
    return {
      showPreview: false,
      address: '',
      files: [],
      imageURLS: [],
      imagesTarget: [],
      showDelete: false,
      range: {}
    }
  },
  methods: {
    handleClose () {
      this.$parent.show = false;
    },
    getRange (range) {
      console.log('range', range)
      this.range = range
    },
    // 选择图片
    selectFile (event) {
      var e = event || window.event;
      var files = e.target.files;
      if (files.length > 1) {
        // this.files.concat(Array.from(files))
        for (var i = 0; i < files.length; i++) {
          this.files.push(files[i])
        }
      } else {
        this.files.push(files[0]);
      }
      var addIcon = this.$refs.addIcon;
      this.previewImage(this.files, addIcon);
    },
    async previewImage () {
      this.showPreview = true;
      for (var i = 0; i < this.files.length; i++) {
        var url = this.getObjectURL(this.files[i]);
        var image = new Image();
        image.src = url;
        image.name = this.files[i].name;
        image.style.cssText = "width:auto;height:100%";
        var isSaved = false;
        for (var j = 0; j < this.imagesTarget.length; j++) {
          var imgTarget = this.imagesTarget[j];
          if (imgTarget.name == image.name) {
            isSaved = true;
            break;
          }
        }
        if (!isSaved) {
          this.imagesTarget.push(image);
        }
      }
    },
    async startUpload () {
      var fd = new FormData();
      for (var i = 0; i < this.files.length; i++) {
        fd.append(this.formDataTitle, this.files[i]);
      }
      /**
       * 每个项目的上传功能的入参可能都不一样，因此也需要用户提供自己的对应入参，和fd进行拼接
       * 
       */
      let params = { fd: fd }
      // 调用当前系统提供的上传函数，
      let res = await this.uploadMethod(params);
      console.log('res=====', res)
      let url = res.imgURL
      this.insertImage(url)
    },
    async insertImage (url) {
      let _this = this
      this.restoreRange(this.currentSelection);
      if (this.range) {
        var innerDom = this.range.extractContents();
        var img = document.createElement("img");
        img.className = 'inertImage'
        img.src = url
        img.style.width = "100%";
        img.appendChild(innerDom);
        var maskView = document.createElement('div')
        maskView.style.cssText = `
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background: rgba(0,0,0,0.4)
                `
        img.onclick = function () {
          console.log([this])
          // this.appendChild(maskView)
        }
        _this.$parent.selectMenu()
        this.range.insertNode(img);
      }
      console.log('range---------', this.range)
      this.$parent.handleClose()
    },
    deleteURL (index) {
      //删除地址
      this.imageURLS.splice(index, 1);
      // 删除图片对应的文件对象
      this.files.splice(index, 1);
      // 删除预览图片
      this.imagesTarget.splice(index, 1)
    }
  }
}
</script>
<style scoped>
* {
  list-style: none;
  margin: 0;
  padding: 0;
}
.uploadServer {
  width: 100%;
  height: 100%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.serverAddress,
.baseURL {
  width: 100%;
  height: 35px;
  padding: 5px;
}
.serverAddress label,
.baseURL label {
  display: inline-block;
  width: 100px;
  padding-left: 20px;
}
#serverAddress,
#localAddress,
#baseURL {
  height: 100%;
  width: 80%;
  border: none;
  border: 1px solid lightgray;
  border-radius: 5px;
  outline: none;
  padding: 2px;
  box-sizing: border-box;
}

/*上传图标*/
.addIcon {
  width: 100%;
  height: 100px;
  display: flex;
  flex-wrap: wrap;
  font-size: 40px;
  margin: 5px;
  color: rgb(140, 230, 244);
  padding-left: 10px;
  justify-content: center;
}
.addIcon ul {
  height: 100%;
  display: flex;
  flex-direction: row;
}
.addIcon ul li {
  height: 100%;
}
.addIcon ul li img {
  height: 100%;
}
.imgDiv {
  height: 100%;
}
.imgDiv img {
  height: 100%;
}
/* 上传结果 */
.results {
  width: 100%;
  height: 80px;
  overflow: scroll;
}

.results ul {
  width: 100%;
  height: 100%;
}

.results ul li {
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin-top: 5px;
  box-sizing: border-box;
  background: rgb(211, 215, 216);
}

/* 划过删除图片 */
.imgCover {
  width: 100%;
  height: 100%;
  background: red;
  z-index: 102;
  font-size: 14px;
  margin-top: -100px;
  text-align: right;
}
#localSource {
  display: none;
}
.localSourceLabel {
  display: block;
  width: 100px;
  height: 100px;
  border: 1px dashed lightgray;
  text-align: center;
  line-height: 100px;
}
.uploadFooter {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
</style>
